import 'package:flutter/material.dart';
import 'package:flutter_kit_plus/flutter_kit.dart';

class HomeItem extends StatelessWidget {
  final double value; // 当前值，例如 1.0
  final double min;
  final double max;

  const HomeItem({super.key, required this.value, this.min = 0, this.max = 2.5});
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        return CustomPaint(
          size: Size(constraints.maxWidth, constraints.maxHeight), // 整个控件大小
          painter: _GaugePainter(value, min, max),
        );
      },
    );
  }
}

class _GaugePainter extends CustomPainter {
  final double value;
  final double min;
  final double max;

  _GaugePainter(this.value, this.min, this.max);

  @override
  void paint(Canvas canvas, Size size) {
    final paintBg = Paint()
      ..color = Colors.white
      ..style = PaintingStyle.fill;

    final paintBorder = Paint()
      ..color = Colors.white
      ..style = PaintingStyle.stroke
      ..strokeWidth = 10;

    final paintFill = Paint()
      ..color = Colors.green
      ..style = PaintingStyle.fill;

    // 中间圆角槽
    final rect = RRect.fromLTRBR(
      size.width * 0.4, // 左边留空间
      20,
      size.width * 0.7,
      size.height - 20,
      const Radius.circular(30),
    );
    canvas.drawRRect(rect, paintBg);
    canvas.drawRRect(rect, paintBorder);

    // 绿色高度
    final percent = ((value - min) / (max - min)).clamp(0.0, 1.0);
    final fillHeight = (rect.height) * percent;

    final fillRect = RRect.fromLTRBR(
      rect.left,
      rect.bottom - fillHeight,
      rect.right,
      rect.bottom,
      const Radius.circular(30),
    );
    canvas.drawRRect(fillRect, paintFill);

    // 左边刻度文字
    final textPainter = TextPainter(textAlign: TextAlign.right, textDirection: TextDirection.ltr);
    for (double t = min; t <= max + 0.1; t += 0.1) {
      double new_t = (t * 10).roundDouble(1);
      bool isFive = new_t % 5 == 0;
      textPainter.text = TextSpan(
        text: !isFive ? '' : t.toStringAsFixed(1),
        style: const TextStyle(color: Colors.white, fontSize: 12),
      );
      textPainter.layout();
      final y = rect.bottom - (rect.height * (t - min) / (max - min));
      textPainter.paint(canvas, Offset(-10, y - textPainter.height / 2));

      // 左边的刻度线
      int l = isFive ? 30 : 18;
      canvas.drawLine(
        Offset(rect.left - l, y),
        Offset(rect.left - 8, y),
        Paint()
          ..color = Colors.grey.shade300
          ..strokeWidth = 1,
      );

      ///右边的刻度线
      if ([0, 1.0, 1.5, 2.5].contains(new_t / 10.0)) {
        canvas.drawLine(
          Offset(rect.right + l, y),
          Offset(rect.right + 8, y),
          Paint()
            ..color = Colors.grey.shade300
            ..strokeWidth = 1,
        );
      }
    }

    // 右边区域文字
    final labels = ["超充装", "正常", "欠压充装"];
    final positions = [0.14, 0.45, 0.7]; //比例与上面文字顺序是相反对应的

    for (int i = 0; i < labels.length; i++) {
      final chars = labels[i].split('');
      // 基础 y 坐标
      final baseY = rect.top + rect.height * positions[i];

      for (int j = 0; j < chars.length; j++) {
        final textPainter = TextPainter(
          text: TextSpan(
            text: chars[j],
            style: const TextStyle(color: Colors.white, fontSize: 10),
          ),
          textDirection: TextDirection.ltr,
        );
        textPainter.layout();

        final dy = baseY + j * (textPainter.height + 2); // 每个字向下排
        textPainter.paint(canvas, Offset(rect.right + 15, dy));
      }
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}
